<template>
  <transition name="slide">
  <div class="page">
    <page-header title="我的优惠券"></page-header>
    <scroll class="content" :data="list" ref="scroll" :class="{'loading': loading}"
      :pullup="true" :pulldown="true" @scrollToEnd="_more" @pullingDown="_refash">
      <ul class="list">
        <li v-for="(item, index) in list" :key="index" class="item">
          <p class="name">{{item.bean.coupon.name}}</p>
          <div class="info">
            <p class="date"><span>有效期：</span><span>{{item.bean.overTime}}</span></p>
            <p class="name"><span>状态：</span><span>{{item.bean.status === '1' ? '已使用' : '未使用'}}</span></p>
            <p class="name" v-if="item.bean.coupon.type == 1"><span>活动：</span><span>{{item.bean.activity.name}}</span></p>
          </div>
          <p class="value"><span>{{item.bean.discount}}</span>元优惠券</p>
        </li>
      </ul>
      <p class="nomore" v-if="nomore">没有更多</p>
    </scroll>
  </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import Scroll from 'components/scroll/scroll'
import * as exampleApi from 'api/example'
export default {
  components: {
    PageHeader,
    Scroll
  },
  data () {
    return {
      list: [],
      page: 1,
      pageSize: 5,
      type: '',
      text: '',
      loading: false,
      nomore: false
    }
  },
  created() {
    this._initData()
  },
  methods: {
    _more() {
      if (this.nomore) {
        return
      }
      this.page ++
      this._initData()
    },
    _refash() {
      this.page = 1
      this.loading = true
      this.nomore = false
      this._initData()
    },
    _initData() {
      exampleApi.modePost('/api/public/wz/activity/myCoupon', ({
        humanId: sessionStorage.getItem('studentId'),
        pageNo: this.page,
        pageSize: this.pageSize
      }))
        .then(res => {
          if (res.data.data.rows.length < this.pageSize) {
            this.nomore = true
          }
          if (this.page === 1) {
            this.list = res.data.data.rows
          } else if (this.page > 1) {
            this.list = this.list.concat(res.data.data.rows)
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .page {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .content{
      position: relative;
      height:calc(~"100% - 84px");
      overflow: hidden;
      &::after {
        position: absolute;
        display: none;
        content: '';
        top: 10px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        background: url('../../assets/image/loading.gif') no-repeat center / 40px auto;
      }
      .list{
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
      }
      .item{
        position: relative;
        width: 100%;
        height: 210px;
        background-color: #ffffff;
        box-sizing:border-box;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: PingFang;
        background: url('../../assets/image/personal/ticket_green.png') no-repeat center / 100% 100%;
        &:nth-child(2n) {
          background-image: url('../../assets/image/personal/ticket_blue.png');
        }
        padding: 16px 0;
        padding-left: 236px;
        .name{
          font-size: 26px;
          font-weight: bold;
          color: #161616;
        }
        .info{
          flex: 1;
          p{
            display: flex;
            margin-top: 16px;
            span{
              font-size: 19px;
              color: #555555;
              &:nth-child(1){
                width: 86px;
              }
              &:nth-child(2){
                color: #5a78ff;
              }
            }
          }
        }
        .value{
          font-size: 20px;
          color: #cccccc;
          span{
            font-size: 34px;
            color: #ff5c2a;
            letter-spacing: 5px;
            margin-right: 20px;
            font-family: 'PingFang-SC';
          }
        }
      }
      .nomore{
        font-size: 22px;
        color: #999999;
        text-align: center;
        padding-bottom: 20px;
      }
    }
    .content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
